<template>
  <div class="sub-bread">
    <XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem :to="'/category/' + breadObj.top_category_id">
        {{ breadObj.top_category_name }}
      </XtxBreadItem>
      <transition name="slider" mode="out-in" appear>
        <XtxBreadItem :key="Date.now()" v-if="breadObj.sub_category_name">
          {{ breadObj.sub_category_name }}</XtxBreadItem
        >
      </transition>
    </XtxBread>
  </div>
</template>

<script>
import { computed } from 'vue-demi'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'SubBread',
  setup () {
    const store = useStore()
    const route = useRoute()
    const breadObj = computed(() => {
      let temp = {}

      store.state.category.list.forEach(item => {
        item.children &&
          item.children.forEach(item2 => {
            if (item2.id === route.params.id) {
              temp = {
                top_category_id: item.id,
                top_category_name: item.name,
                sub_category_id: item2.id,
                sub_category_name: item2.name
              }
            }
          })
      })
      return temp
    })
    return { breadObj }
  }
}
</script>

<style></style>
